<script setup>
	// 注意导入 ref
	import { ref } from 'vue';
	// 导入下拉刷新事件
	import { onPullDownRefresh } from '@dcloudio/uni-app'
	
	// 响应式数据，保存笑话
	const jokeText = ref('')
	// 获取笑话
	const getJoke = async () => {
		// 开启加载动画
		uni.showLoading({ title: '笑话加载中...' })
		// 发起网络请求
		const res = await uni.request({
			method: 'GET', // 请求方式
			url: 'https://api-vue-base.itheima.net/api/joke', // 请求地址
			data: {} // 请求参数，
		})
		console.log(res)
		// 把后端返回的数据赋值给 ref, 数据驱动视图
		jokeText.value = res.data
		// 关闭加载动画
		uni.hideLoading()
	}
	
	// 先调用一次获取笑话，点击按钮时发送新的网络请求，获取新的笑话
	getJoke()
	
	const jokeList = ref([])
	// 获取多条笑话
	const getJokeList = async () => {
		// 网络请求需要等待，笑话加载中，显示 loading
		uni.showLoading({ title:'笑话加载中...' })
		// 发送网络请求
		const res = await uni.request({
			method: 'GET', // 请求方式
			url: 'https://api-vue-base.itheima.net/api/joke/list', // 请求地址
			data: { num : 3 } // 请求参数
		})
		console.log(res)
		// 注意：这个接口返回的是一个对象，res.data 是后端返回的数据，res.data.data 才能访问到对象中的数据
		jokeList.value = res.data.data
		// 数据加载完毕，隐藏 loading 
		uni.hideLoading()
	}
	
	getJokeList()
	
	// 下拉刷新事件
	//  1. 再 pages.json 中添加配置 "enablePullDownRefresh": true 
	//  2. 通过 import 导入 onPullDownRefresh 事件后，才能使用
	onPullDownRefresh(async () => {
		// 开启 lading 提示
		uni.showNavigationBarLoading()
		// await 等待笑话数据获取，数据获取成功后，才关闭下拉刷新效果
		await Promise.all([ getJoke(),getJokeList() ])
		// await getJoke()
		// await getJokeList()
		// 关闭 loading 提示
		uni.hideNavigationBarLoading()
		// 数据获取成功，关闭下拉刷新动画效果
		uni.stopPullDownRefresh()
	})
	
</script>

<template>
	<view class="joke column">
		<image class="joke-image" src="../../static/joke.jpeg" mode=""></image>
		<text class="joke-text">{{ jokeText }}</text>
		<button class="joke-button" v-if="jokeText" @click="getJoke()" type="primary">换个笑话</button>
		<!-- 获取多条笑话 -->
		<!-- 注意：判断数组非空，需要判断数组的长度是否大于 0 -->
		<button v-if="jokeList.length > 0" @click="getJokeList()" type="warn">换组笑话列表</button>
		<view class="joke-list">
			<view class="joke-item" v-for="item in jokeList" :key="item">
			   笑话：{{ item }}
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.joke {
		padding: 20rpx;
		align-items: center;

		.joke-image {
			width: 300rpx;
			height: 300rpx;
			margin-bottom: 20rpx;
		}
		
		.joke-button {
			// 设置背景色为主题色
			background-color: $uni-color-primary;
			margin-bottom: 20rpx;
		}
		
		.joke-item {
			padding: 20rpx;
			// &            表示当前选择器本身，也就是 .joke-item
			// :not()       排除
			// :last-child  最后一个子项
			&:not(:last-child) {
				border-bottom: 1rpx solid #f60;
			}
		}
	}
</style>